<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识仓库 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== 基础样式重置 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    /* ===== CSS 变量定义 ===== */
    :root {
      --primary-color: #4a6bff;
      --primary-light: #eef2ff;
      --secondary-color: #ff6b6b;
      --accent-color: #00d2d3;
      --success-color: #10b981;
      --warning-color: #f59e0b;
      --danger-color: #ef4444;
      --text-primary: #1f2937;
      --text-secondary: #6b7280;
      --text-light: #9ca3af;
      --background-light: #f9fafb;
      --white: #ffffff;
      --border-color: #e5e7eb;
      --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
      --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07);
      --shadow-heavy: 0 10px 15px rgba(0, 0, 0, 0.1);
      --border-radius: 12px;
      --transition: all 0.3s ease;
    }

    body {
      background-color: var(--background-light);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
    }

    /* ===== 导航栏样式 ===== */
    .navbar {
      background: var(--white);
      box-shadow: var(--shadow-light);
      padding: 15px 0;
      z-index: 100;
      position: sticky;
      top: 0;
    }

    .navbar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-weight: 700;
      color: var(--primary-color);
    }

    .nav-brand i {
      margin-right: 10px;
      font-size: 26px;
    }

    .nav-buttons {
      display: flex;
      gap: 15px;
    }

    /* ===== 按钮样式 ===== */
    .btn {
      padding: 10px 20px;
      border-radius: var(--border-radius);
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
      font-size: 14px;
    }

    .btn-outline {
      border: 2px solid var(--primary-color);
      color: var(--primary-color);
      background: transparent;
    }

    .btn-primary {
      background: var(--primary-color);
      color: var(--white);
      box-shadow: var(--shadow-light);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    .btn-outline:hover {
      background: var(--primary-color);
      color: var(--white);
    }

    .btn-back {
      background: var(--text-light);
      color: var(--white);
      margin-right: 15px;
    }

    .btn-back:hover {
      background: var(--text-secondary);
    }

    /* ===== 主布局 ===== */
    .main-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* ===== 页面标题区域 ===== */
    .page-header {
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .page-title {
      font-size: 32px;
      color: var(--text-primary);
      margin-bottom: 10px;
      font-weight: 700;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-secondary);
      font-size: 14px;
      cursor: pointer;
    }

    .breadcrumb-item:not(:last-child):after {
      content: "›";
      margin-left: 10px;
    }

    .breadcrumb-item.active {
      color: var(--primary-color);
      font-weight: 600;
    }

    /* ===== 卡片网格布局 ===== */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
    }

    .card {
      background: var(--white);
      border-radius: var(--border-radius);
      overflow: hidden;
      box-shadow: var(--shadow-light);
      border: 1px solid var(--border-color);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-heavy);
    }

    .card.card-locked {
      position: relative;
      border: 1px dashed var(--warning-color);
    }

    .card.card-locked:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-heavy);
    }

    .card-image {
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 40px;
    }

    .card-content {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .card-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .card-description {
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 15px;
      font-size: 14px;
      flex-grow: 1;
    }

    .card-meta {
      display: flex;
      justify-content: space-between;
      margin-top: auto;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .card-count {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--border-color);
    }

    .progress-container {
      flex-grow: 1;
      margin-right: 15px;
    }

    .progress-bar {
      height: 6px;
      background: var(--border-color);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 5px;
    }

    .progress-fill {
      height: 100%;
      background: var(--success-color);
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    .progress-text {
      font-size: 12px;
      color: var(--text-light);
    }

    .card-btn {
      padding: 8px 15px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-weight: 600;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .card-btn:hover {
      background: #3a56e6;
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    .card-btn.locked {
      background: #d1d5db;
      color: #6b7280;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
    }

    .status-success {
      background: rgba(16, 185, 129, 0.15);
      color: #047857;
    }

    .status-warning {
      background: rgba(245, 158, 11, 0.15);
      color: #92400e;
    }

    .status-muted {
      background: rgba(156, 163, 175, 0.2);
      color: #374151;
    }

    .lock-hint {
      font-size: 13px;
      color: var(--warning-color);
      text-align: right;
      margin-top: 6px;
    }

    /* ===== 分页样式 ===== */
    .pagination-container {
      margin: 40px 0 20px;
      text-align: center;
    }

    .page-info {
      margin-bottom: 15px;
      color: var(--text-secondary);
      font-size: 14px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }

    .page-link {
      padding: 10px 15px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      text-decoration: none;
      color: var(--text-primary);
      transition: var(--transition);
      font-size: 14px;
      min-width: 40px;
      text-align: center;
      display: inline-block;
      cursor: pointer;
    }

    .page-link:hover {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
    }

    .page-link.active {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
    }

    .page-link.disabled {
      color: var(--text-light);
      cursor: not-allowed;
      background: var(--background-light);
    }

    .page-ellipsis {
      padding: 10px 5px;
      color: var(--text-light);
    }

    .page-jump {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 15px;
      flex-wrap: wrap;
    }

    .page-input {
      width: 60px;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      text-align: center;
    }

    .jump-btn {
      padding: 8px 15px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: var(--transition);
    }

    .jump-btn:hover {
      background: #3a56e6;
    }

    /* ===== 页脚样式 ===== */
    footer {
      text-align: center;
      color: var(--text-secondary);
      padding: 30px 0;
      margin-top: 40px;
      border-top: 1px solid var(--border-color);
      background: var(--white);
    }

    footer p {
      margin-bottom: 15px;
    }

    /* ===== 加载动画 ===== */
    .loading-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px;
      grid-column: 1 / -1;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid var(--primary-light);
      border-top: 4px solid var(--primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* ===== 空状态 ===== */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-light);
      grid-column: 1 / -1;
    }

    .empty-state i {
      font-size: 48px;
      margin-bottom: 20px;
    }

    .empty-state h3 {
      color: var(--text-secondary);
      margin-bottom: 10px;
    }

    /* ===== 响应式设计 ===== */
    @media (max-width: 768px) {
      .nav-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
      }

      .navbar .container {
        flex-direction: column;
        gap: 15px;
      }

      .cards-grid {
        grid-template-columns: 1fr;
      }

      .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .pagination {
        gap: 3px;
      }

      .page-link {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 35px;
      }
    }

    @media (max-width: 480px) {
      .main-container {
        padding: 15px;
      }

      .page-title {
        font-size: 28px;
      }

      .card-image {
        height: 120px;
        font-size: 32px;
      }
    }

    /* ===== 难度徽章样式 ===== */
    .difficulty-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 16px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 700;
      min-width: 72px;
    }
    .difficulty-beginner {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
    }
    .difficulty-intermediate {
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b;
    }
    .difficulty-advanced {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
  <div class="container">
    <div class="nav-brand">
      <i class="fas fa-graduation-cap"></i> 渐进学习平台
    </div>
    <div class="nav-buttons">
      <span style="margin-right: 15px; color: var(--primary-color);">
        欢迎，<span id="username">学习者</span>
      </span>
      <a href="/" class="btn btn-outline">返回首页</a>
      <a href="#" class="btn btn-outline">退出</a>
    </div>
  </div>
</nav>

<!-- 主布局 -->
<div class="main-container">
  <!-- 页面标题区域 -->
  <div class="page-header">
    <div>
      <h1 class="page-title" id="pageTitle">知识分类</h1>
      <div class="breadcrumb" id="breadcrumb">
        <div class="breadcrumb-item active">知识分类</div>
      </div>
    </div>
    <div id="backButtonContainer"></div>
  </div>

  <!-- 卡片网格容器 -->
  <div class="cards-grid" id="cardsContainer">
    <!-- 卡片将通过JavaScript动态生成 -->
  </div>

  <!-- 分页导航 -->
  <div class="pagination-container" id="paginationContainer">
    <!-- 分页将通过JavaScript动态生成 -->
  </div>
</div>

<!-- 页脚 -->
<footer>
  <p>&copy; 2024 渐进学习平台 - 让学习像健身一样科学有效</p>
  <p>联系我们: support@knowledge-gym.com</p>
</footer>

<script>
  // 全局变量
  let currentLevel = 'class'; // 当前层级：class, module, package, point
  let currentClassId = null;
  let currentModuleId = null;
  let currentPackageId = null;
  let currentPage = 1;
  const pageSize = 12; // 每页显示12个卡片

  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', function() {
    loadClasses();
  });

  // 加载知识分类
  async function loadClasses(page = 1) {
    showLoading();
    currentLevel = 'class';
    currentClassId = null;
    currentModuleId = null;
    currentPackageId = null;
    currentPage = page;

    try {
      // 调用后端API获取分类数据
      const response = await fetch(`/knowledge/api/classes?page=${page}&size=${pageSize}`);
      const data = await response.json();

      updateBreadcrumb();
      updateBackButton();
      renderClassCards(data.items);
      renderPagination(data.totalPages, data.currentPage, data.totalItems, 'class');
    } catch (error) {
      console.error('加载分类失败:', error);
      showEmptyState('加载失败，请重试');
    }
  }

  // 加载知识模块
  async function loadModules(classId, page = 1) {
    showLoading();
    currentLevel = 'module';
    currentClassId = classId;
    currentModuleId = null;
    currentPackageId = null;
    currentPage = page;

    try {
      // 调用后端API获取模块数据
      const response = await fetch(`/knowledge/api/classes/${classId}/modules?page=${page}&size=${pageSize}`);
      const data = await response.json();

      updateBreadcrumb();
      updateBackButton();
      renderModuleCards(data.items);
      renderPagination(data.totalPages, data.currentPage, data.totalItems, 'module');
    } catch (error) {
      console.error('加载模块失败:', error);
      showEmptyState('加载失败，请重试');
    }
  }

  // 加载知识包
  async function loadPackages(moduleId, page = 1) {
    showLoading();
    currentLevel = 'package';
    currentModuleId = moduleId;
    currentPackageId = null;
    currentPage = page;

    try {
      // 调用后端API获取知识包数据
      const response = await fetch(`/knowledge/api/modules/${moduleId}/packages?page=${page}&size=${pageSize}`);
      const data = await response.json();

      updateBreadcrumb();
      updateBackButton();
      renderPackageCards(data.items);
      renderPagination(data.totalPages, data.currentPage, data.totalItems, 'package');
    } catch (error) {
      console.error('加载知识包失败:', error);
      showEmptyState('加载失败，请重试');
    }
  }

  // 加载知识点
  async function loadPoints(packageId, page = 1) {
    showLoading();
    currentLevel = 'point';
    currentPackageId = packageId;
    currentPage = page;

    try {
      // 调用后端API获取知识点数据
      const response = await fetch(`/knowledge/api/packages/${packageId}/points?page=${page}&size=${pageSize}`);
      const data = await response.json();

      updateBreadcrumb();
      updateBackButton();
      renderPointCards(data.items);
      renderPagination(data.totalPages, data.currentPage, data.totalItems, 'point');
    } catch (error) {
      console.error('加载知识点失败:', error);
      showEmptyState('加载失败，请重试');
    }
  }

  // 更新面包屑导航
  function updateBreadcrumb() {
    const breadcrumb = document.getElementById('breadcrumb');
    let html = '<div class="breadcrumb-item" onclick="loadClasses()">知识分类</div>';

    if (currentClassId) {
      html += '<div class="breadcrumb-item" onclick="loadClasses()">分类名称</div>';
    }

    if (currentModuleId) {
      html += '<div class="breadcrumb-item" onclick="loadModules(currentClassId)">模块名称</div>';
    }

    if (currentPackageId) {
      html += '<div class="breadcrumb-item" onclick="loadPackages(currentModuleId)">知识包名称</div>';
    }

    // 当前层级高亮显示
    html += `<div class="breadcrumb-item active">${getCurrentLevelName()}</div>`;

    breadcrumb.innerHTML = html;
  }

  // 更新返回按钮
  function updateBackButton() {
    const backButtonContainer = document.getElementById('backButtonContainer');

    if (currentLevel === 'class') {
      backButtonContainer.innerHTML = '';
      return;
    }

    let backFunction = '';

    if (currentLevel === 'module') {
      backFunction = 'loadClasses()';
    } else if (currentLevel === 'package') {
      backFunction = `loadModules(${currentClassId})`;
    } else if (currentLevel === 'point') {
      backFunction = `loadPackages(${currentModuleId})`;
    }

    backButtonContainer.innerHTML = `
      <button class="btn btn-back" onclick="${backFunction}">
        <i class="fas fa-arrow-left"></i> 返回上一层
      </button>
    `;
  }

  // 获取当前层级名称
  function getCurrentLevelName() {
    switch(currentLevel) {
      case 'class': return '知识分类';
      case 'module': return '知识模块';
      case 'package': return '知识包';
      case 'point': return '知识点';
      default: return '知识分类';
    }
  }

  function formatDurationLabel(seconds) {
    if (!seconds || seconds <= 0) {
      return '0 分钟';
    }
    const minutes = Math.max(1, Math.round(seconds / 60));
    if (minutes >= 120) {
      const hours = minutes / 60;
      const rounded = hours >= 10 ? Math.round(hours) : Math.round(hours * 10) / 10;
      return `${rounded} 小时`;
    }
    return `${minutes} 分钟`;
  }

  function getDifficultyClass(difficulty) {
    if (!difficulty) return 'beginner';
    const map = {
      'beginner': 'beginner',
      '初级': 'beginner',
      'intermediate': 'intermediate',
      '中级': 'intermediate',
      'advanced': 'advanced',
      '高级': 'advanced'
    };
    return map[difficulty.toLowerCase ? difficulty.toLowerCase() : difficulty] || 'beginner';
  }

  function getDifficultyText(difficulty) {
    if (!difficulty) return '未知';
    const map = {
      'beginner': '初级',
      '初级': '初级',
      'intermediate': '中级',
      '中级': '中级',
      'advanced': '高级',
      '高级': '高级'
    };
    return map[difficulty.toLowerCase ? difficulty.toLowerCase() : difficulty] || '未知';
  }

  function resolveStatusLabel(item) {
    if (item.statusLabel) return item.statusLabel;
    if (item.completed) return '已完成';
    if (item.started) return '学习中';
    return '未开始';
  }

  function resolveStatusClass(label) {
    if (!label) return 'status-muted';
    if (label.includes('完成')) return 'status-success';
    if (label.includes('待') || label.includes('学习')) return 'status-warning';
    return 'status-muted';
  }

  // 渲染分类卡片
  function renderClassCards(classes) {
    const container = document.getElementById('cardsContainer');

    if (!classes || classes.length === 0) {
      showEmptyState('暂无分类数据');
      return;
    }

    let html = '';

    classes.forEach(cls => {
      html += `
        <div class="card">
          <div class="card-image" style="background: linear-gradient(135deg, #4a6bff, #6b8cff);">
            <i class="fas fa-layer-group"></i>
          </div>
          <div class="card-content">
            <h3 class="card-title">${cls.name}</h3>
            <p class="card-description">${cls.description || '暂无描述'}</p>
            <div class="card-meta">
              <div class="card-count">
                <i class="fas fa-cube"></i>
                <span>${cls.moduleCount || 0} 个模块</span>
              </div>
              <div class="card-count">
                <i class="far fa-clock"></i>
                <span>累计投入 ${formatDurationLabel(cls.actualDurationSeconds || 0)}</span>
              </div>
            </div>
            <div class="card-footer">
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress-fill" style="width: ${cls.progress || 0}%;"></div>
                </div>
                <div class="progress-text">已学习 ${cls.progress || 0}%</div>
              </div>
              <button class="card-btn" onclick="loadModules(${cls.id})">
                <i class="fas fa-arrow-right"></i> 查看模块
              </button>
            </div>
          </div>
        </div>
      `;
    });

    container.innerHTML = html;
  }

  // 渲染模块卡片
  function renderModuleCards(modules) {
    const container = document.getElementById('cardsContainer');

    if (!modules || modules.length === 0) {
      showEmptyState('暂无模块数据');
      return;
    }

    let html = '';

    modules.forEach(module => {
      html += `
        <div class="card">
          <div class="card-image" style="background: linear-gradient(135deg, #00d2d3, #4ecdc4);">
            <i class="fas fa-cube"></i>
          </div>
          <div class="card-content">
            <h3 class="card-title">${module.name}</h3>
            <p class="card-description">${module.description || '暂无描述'}</p>
            <div class="card-meta">
              <div class="card-count">
                <i class="fas fa-box-open"></i>
                <span>${module.packageCount || 0} 个知识包</span>
              </div>
              <div class="card-count">
                <i class="far fa-clock"></i>
                <span>累计投入 ${formatDurationLabel(module.actualDurationSeconds || 0)}</span>
              </div>
            </div>
            <div class="card-footer">
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress-fill" style="width: ${module.progress || 0}%;"></div>
                </div>
                <div class="progress-text">已学习 ${module.progress || 0}%</div>
              </div>
              <button class="card-btn" onclick="loadPackages(${module.id})">
                <i class="fas fa-arrow-right"></i> 查看知识包
              </button>
            </div>
          </div>
        </div>
      `;
    });

    container.innerHTML = html;
  }

  // 渲染知识包卡片
  function renderPackageCards(packages) {
    const container = document.getElementById('cardsContainer');

    if (!packages || packages.length === 0) {
      showEmptyState('暂无知识包数据');
      return;
    }

    let html = '';

    packages.forEach(pkg => {
      const statusLabel = resolveStatusLabel(pkg);
      const statusClass = resolveStatusClass(statusLabel);
      const locked = !!pkg.locked;
      const cardClass = locked ? 'card card-locked' : 'card';
      const buttonLabel = locked ? '待解锁' : '查看知识点';
      const buttonIcon = locked ? 'fa-lock' : 'fa-arrow-right';
      const unlockHint = locked ? (pkg.unlockHint || '完成上一知识包后自动解锁') : '';

      html += `
        <div class="${cardClass}">
          <div class="card-image" style="background: linear-gradient(135deg, #ff6b6b, #ff8e8e);">
            <i class="fas fa-box-open"></i>
          </div>
          <div class="card-content">
            <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
              <h3 class="card-title" style="margin-bottom:0;">${pkg.name}</h3>
              <span style="font-size:14px; color:var(--text-light); white-space:nowrap;">预计用时 ${pkg.totalDuration || 0} 分钟</span>
            </div>
            <p class="card-description">${pkg.description || '暂无描述'}</p>
            <div class="card-meta">
              <div class="card-count">
                <i class="fas fa-book"></i>
                <span>${pkg.pointCount || 0} 个知识点</span>
              </div>
              <div class="card-count" style="margin-left:auto;">
                <i class="far fa-clock"></i>
                <span>累计投入 ${formatDurationLabel(pkg.actualDurationSeconds || 0)}</span>
              </div>
            </div>
            <div class="card-count status-pill ${statusClass}">
              <i class="fas fa-flag-checkered"></i>
              <span>${statusLabel}</span>
            </div>
            <div class="card-footer">
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress-fill" style="width: ${pkg.progress || 0}%;"></div>
                </div>
                <div class="progress-text">已学习 ${pkg.progress || 0}%</div>
              </div>
              <div>
                <button class="card-btn ${locked ? 'locked' : ''}" ${locked ? 'disabled' : ''} onclick="handlePackageClick(${pkg.id}, ${locked})">
                  <i class="fas ${buttonIcon}"></i> ${buttonLabel}
              </button>
                ${locked ? `<div class="lock-hint">${unlockHint}</div>` : ''}
              </div>
            </div>
          </div>
        </div>
      `;
    });

    container.innerHTML = html;
  }

  function renderPointCards(points) {
    const container = document.getElementById('cardsContainer');

    if (!points || points.length === 0) {
      showEmptyState('暂无知识点数据');
      return;
    }

    let html = '';

    points.forEach(point => {
      const difficultyKey = point.difficultyLevel || point.difficulty;
      const difficultyClass = getDifficultyClass(difficultyKey);
      const difficultyText = point.difficultyLabel || getDifficultyText(difficultyKey);
      const difficultyBadge = `<span class="difficulty-badge difficulty-${difficultyClass}">${difficultyText}</span>`;
      const statusLabel = resolveStatusLabel(point);
      const statusClass = resolveStatusClass(statusLabel);
      const locked = !!point.locked;
      const cardClass = locked ? 'card card-locked' : 'card';
      const buttonLabel = locked ? '待解锁' : '开始学习';
      const buttonIcon = locked ? 'fa-lock' : 'fa-play';
      const unlockHint = locked ? (point.unlockHint || '请先完成上一知识点') : '';

      html += `
        <div class="${cardClass}">
          <div class="card-image" style="background: linear-gradient(135deg, #10b981, #34d399);">
            <i class="fas fa-book"></i>
          </div>
          <div class="card-content">
            <h3 class="card-title">${point.name} ${difficultyBadge}</h3>
            <p class="card-description">${point.description || '暂无描述'}</p>
            <div class="card-meta">
              <div class="card-count">
                <i class="far fa-clock"></i>
                <span>累计投入 ${formatDurationLabel(point.actualDurationSeconds || 0)}</span>
              </div>
              <div class="card-count status-pill ${statusClass}">
                <i class="fas fa-check-circle"></i>
                <span>${statusLabel}</span>
              </div>
            </div>
            <div class="card-footer">
              <div class="progress-container">
                <div class="progress-bar">
                  <div class="progress-fill" style="width: ${point.progress || 0}%;"></div>
                </div>
                <div class="progress-text">已学习 ${point.progress || 0}%</div>
              </div>
              <div>
                <button class="card-btn ${locked ? 'locked' : ''}" ${locked ? 'disabled' : ''} onclick="startTraining(${point.id}, ${locked})">
                  <i class="fas ${buttonIcon}"></i> ${buttonLabel}
              </button>
                ${locked ? `<div class="lock-hint">${unlockHint}</div>` : ''}
              </div>
            </div>
          </div>
        </div>
      `;
    });

    container.innerHTML = html;
  }

  // 渲染分页
  function renderPagination(totalPages, currentPage, totalItems, level) {
    const container = document.getElementById('paginationContainer');

    if (totalPages <= 1) {
      container.innerHTML = '';
      return;
    }

    let html = `
      <div class="page-info">
        共 <span>${totalItems}</span> 个项目，第 <span>${currentPage}</span> 页，共 <span>${totalPages}</span> 页
      </div>
      <div class="pagination">
    `;

    // 上一页
    if (currentPage > 1) {
      html += `<a class="page-link" onclick="goToPage(${currentPage - 1}, '${level}')">‹ 上一页</a>`;
    } else {
      html += `<a class="page-link disabled">‹ 上一页</a>`;
    }

    // 页码
    for (let i = 1; i <= totalPages; i++) {
      if (i === currentPage) {
        html += `<a class="page-link active">${i}</a>`;
      } else {
        html += `<a class="page-link" onclick="goToPage(${i}, '${level}')">${i}</a>`;
      }
    }

    // 下一页
    if (currentPage < totalPages) {
      html += `<a class="page-link" onclick="goToPage(${currentPage + 1}, '${level}')">下一页 ›</a>`;
    } else {
      html += `<a class="page-link disabled">下一页 ›</a>`;
    }

    html += `</div>`;

    container.innerHTML = html;
  }

  // 跳转到指定页面
  function goToPage(page, level) {
    if (level === 'class') {
      loadClasses(page);
    } else if (level === 'module') {
      loadModules(currentClassId, page);
    } else if (level === 'package') {
      loadPackages(currentModuleId, page);
    } else if (level === 'point') {
      loadPoints(currentPackageId, page);
    }
  }

  // 显示加载状态
  function showLoading() {
    const container = document.getElementById('cardsContainer');
    container.innerHTML = `
      <div class="loading-container">
        <div class="loading-spinner"></div>
      </div>
    `;
  }

  // 显示空状态
  function showEmptyState(message) {
    const container = document.getElementById('cardsContainer');
    container.innerHTML = `
      <div class="empty-state">
        <i class="fas fa-inbox"></i>
        <h3>暂无数据</h3>
        <p>${message}</p>
      </div>
    `;
  }

  function handlePackageClick(packageId, locked) {
    if (locked) {
      alert('请先完成上一知识包的全部知识点再前往下一个知识包。');
      return;
    }
    loadPoints(packageId);
  }

  // 开始学习知识点
  function startTraining(pointId, locked) {
    if (locked) {
      alert('请先完成上一知识点的学习任务再继续。');
      return;
    }
    window.location.href = `/knowledge/training/start/${pointId}`;
  }
</script>
</body>
</html>